<template>
  <div class="c-bg-sgray">
    <new-search-bar :selectList="selectList" :searchText="searchText" @search="startSearch" @cancel="startSearch" @input="biindInput" bgSearch="c-bg-white"></new-search-bar>
    <!-- <new-search-bar :searchText="searchText" @search="startSearch" @cancel="startSearch"></new-search-bar> -->
    <div class="c-bg-white c-ph24">
      <my-small-tabbar :flexClass="'c-flex-row'" :isScroll="true" :tabList="tabList" :tabIndex="memberType" @changeTab="changeType"></my-small-tabbar>
    </div>
    <div class="c-fs22 c-fc-gray c-pv20 c-ph24">总人数：{{teamCount}}</div>
    <div class="c-ph24" v-show="memberType == 1">
      <div v-for="(item, index) in teamList" :key="index" class="c-bg-white c-ph20 c-pt20 c-pb30 c-flex-row c-mb20">
        <img class="c-ww80 c-hh80 c-br40" :src="$addXossFilter(item.headimgurl, require('@/assets/defult_head.png'))" alt="">
        <div class="c-w0 c-flex-grow1 c-ml20 c-fc-gray">
          <div class="c-flex-row c-aligni-center">
            <div class="c-fs24 c-fc-xblack c-fw400 c-text-ellipsis1">{{item.nickname}}</div>
            <div class="c-flex-row c-aligni-center c-flex-shrink0 c-ml8">
              <img :src="$addXossFilter(item.userType == 1 ? require('../../../../public/i/wap/memberIndex/normalVip.png') : item.userType == 10 ? require('../../../../public/i/wap/memberIndex/mbvip.png') : require('../../../../public/i/wap/memberIndex/mbAgent.png'), require('@/assets/defult_head.png'))" alt="" :class="item.userType == 1 || item.userType == 10 ? 'c-ww36' : 'c-ww50'" class="imgCloseBig c-p c-inlineblack c-vcAlign-middle">
              <div :class="item.userType == 1 ? 'c-bg-f2 c-fc-sblack' : item.userType == 10 ? 'c-mbIndexBg2 c-fc-xlblown' : 'c-mbIndexBg1 c-fc-white'" class="c-maxw242 c-fs18 c-text-ellipsis1 c-pr10 c-ml-22 c-pl28 c-lh-n c-pl10 c-textAlign-c c-br16 c-pv2 c-flex-row c-aligni-center">
                {{chainConf.arrTypeName && chainConf.arrTypeName[item.userType] ? chainConf.arrTypeName[item.userType] : item.userType == 30 ? '合伙人' : item.userType == 20 ? '代理' : item.userType == 10 ? '会员' : '普通用户'}}
              </div>
            </div>
          </div>
          <div class="c-fs20 c-fc-sgray c-mt16">ID：<span class="c-fc-xblack">{{item.userId}}</span></div>
          <div class="c-fs20 c-fc-sgray c-mt16">姓名：<span class="c-fc-xblack">{{item.realName}}</span></div>
          <div class="c-fs20 c-fc-sgray c-mt16" v-if="enableLookTeamMobile == 1">电话：<span class="c-fc-xblack">{{item.mobile}}</span></div>
          <div class="c-fs20 c-fc-sgray c-mt16">注册时间：<span class="c-fc-xblack">{{item.createdAt}}</span></div>
        </div>
      </div>
    </div>
    <div class="c-ph24" v-show="memberType == 0">
      <div v-for="(item, index) in teamList" :key="index" class="c-bg-white c-ph20 c-pt20 c-pb30 c-flex-row c-mb20">
        <img class="c-ww80 c-hh80 c-br40" :src="$addXossFilter(item.headimgurl, require('@/assets/defult_head.png'))" alt="">
        <div class="c-w0 c-flex-grow1 c-ml20 c-fc-gray">
          <div class="c-flex-row c-aligni-center">
            <div class="c-fs24 c-fc-xblack c-fw400 c-text-ellipsis1">{{item.nickname}}</div>
            <div class="c-flex-row c-aligni-center c-flex-shrink0 c-ml8">
              <img :src="$addXossFilter(item.userType == 1 ? require('../../../../public/i/wap/memberIndex/normalVip.png') : item.userType == 10 ? require('../../../../public/i/wap/memberIndex/mbvip.png') : require('../../../../public/i/wap/memberIndex/mbAgent.png'), require('@/assets/defult_head.png'))" alt="" :class="item.userType == 1 || item.userType == 10 ? 'c-ww36' : 'c-ww50'" class="imgCloseBig c-p c-inlineblack c-vcAlign-middle">
              <div :class="item.userType == 1 ? 'c-bg-f2 c-fc-sblack' : item.userType == 10 ? 'c-mbIndexBg2 c-fc-xlblown' : 'c-mbIndexBg1 c-fc-white'" class="c-maxw242 c-fs18 c-text-ellipsis1 c-pr10 c-ml-22 c-pl28 c-lh-n c-pl10 c-textAlign-c c-br16 c-pv2 c-flex-row c-aligni-center">
                {{chainConf.arrTypeName && chainConf.arrTypeName[item.userType] ? chainConf.arrTypeName[item.userType] : item.userType == 30 ? '合伙人' : item.userType == 20 ? '代理' : item.userType == 10 ? '会员' : '普通用户'}}
              </div>
            </div>
          </div>
          <div class="c-fs20 c-fc-sgray c-mt16">ID：<span class="c-fc-xblack">{{item.userId}}</span></div>
          <div class="c-fs20 c-fc-sgray c-mt16">注册时间：<span class="c-fc-xblack">{{item.createdAt}}</span></div>
          <div class="c-fs20 c-fc-sgray c-mt16">推荐人：<span class="c-fc-xblack">{{item.rNickname}}</span></div>
          <div class="c-fs20 c-fc-sgray c-mt16" v-if="enableLookTeamMobile == 1">电话：<span class="c-fc-xblack">{{item.mobile}}</span></div>
        </div>
      </div>
    </div>
    <loading-status-tem :showLoading="isLoading" :noMoreData="is_page == false && (teamList && teamList.length > 0)" :noData="teamList.length == 0" :noDataText="'暂无结果'"></loading-status-tem>
  </div>
</template>

<script>
import newSearchBar from "@/components/templates/common/newSearchBar.vue"
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { utilJs } from "@/utils/common.js"
export default {
  name: 'ChainTeamMember',
  components: {
    newSearchBar,
    MySmallTabbar,
    loadingStatusTem,
  },
  props: [],
  beforeCreate() {

  },
  data() {
    return {
      searchText: '',
      tabList: [{
        title: '直推用户',
        index: 1,
      }, {
        title: '间推用户',
        index: 0,
      }],
      memberType: 1,
      isLoading: false,
      teamList: [],
      page: 1,
      is_page: false,
      limit: 10,
      userId: "",
      nickname: "",
      realName: "",
      mobile: "",
      selectList: [["昵称", "姓名", "ID", "电话"]],
      firstIn: true,
      teamCount: 0,
      chainConf: '',
      enableLookTeamMobile: 1
    }
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {

  },
  computed: {

  },
  watch: {

  },
  methods: {
    getChainConf() {
      utilJs.getMethod(global.apiurl + 'chain/getChainConf', res => {
        this.chainConf = res;
      })
    },
    biindInput(e) {
      this.searchText = e.searchValue
    },
    startSearch(data) {
      window.scrollTo(0, 0)
      this.teamList = [];
      // 点击搜索
      let si = data.selectItem;
      this.userId = "";
      this.nickname = "";
      this.realName = "";
      this.mobile = "";
      this.page = 1;
      this.is_page = false;
      if (si == '昵称') {
        this.nickname = data.searchValue;
      } else if (si == '姓名') {
        this.realName = data.searchValue;
      } else if (si == 'ID') {
        this.userId = data.searchValue;
      } else if (si == '电话') {
        this.mobile = data.searchValue;
      }
      this.getCount();
      this.getMore();
    },
    changeType(tabIndex) {
      if (this.isLoading) {
        return;
      }
      if (this.memberType != tabIndex) {
        this.page = 1;
        this.is_page = false;
        this.teamList = [];
      }

      this.memberType = tabIndex;
      this.getCount();
      this.getMore();
    },
    getCount() {
      utilJs.getMethod(`${global.apiurl}chainUser/getChainTeamUserNum?isDirect=${this.memberType}&nickname=${this.nickname}&realName=${this.realName}&userId=${this.userId}&mobile=${this.mobile}`, res => {
        this.teamCount = res.all;
      })
    },
    getMore() {
      if (this.isLoading) {
        return;
      }
      this.isLoading = true;
      utilJs.getMethod(`${global.apiurl}chainUser/getChainTeamUser?page=${this.page}&limit=${this.limit}&isDirect=${this.memberType}&nickname=${this.nickname}&realName=${this.realName}&userId=${this.userId}&mobile=${this.mobile}`,
        res => {
          if (res.userType == null) {
            this.$routerGo(this, "replace", { path: "/" });
            return
          }
          if (this.firstIn) {
            // if (res.enableLookTeamMobile == 1) {
            //   this.selectList = [["昵称", "姓名", "ID", "电话"]]
            // } else {
            //   this.selectList = [["昵称", "姓名", "ID"]]
            // }
            this.enableLookTeamMobile = res.enableLookTeamMobile;
            if (res.userType >= 20) {
              this.tabList = [{
                title: '直推用户',
                index: 1,
              }, {
                title: '间推用户',
                index: 0,
              }]
            } else {
              this.tabList = [{
                title: '直推用户',
                index: 1,
              }];
            }
            this.firstIn = false;
          }
          if (this.page == 1) {
            this.teamList = res.data.data ? res.data.data : [];
          } else {
            this.teamList = this.teamList.concat(res.data.data);
          }
          this.page = res.data.data && (res.data.data.length >= this.limit) ? (this.page + 1) : this.page;
          this.is_page = res.data.data && (res.data.data.length >= this.limit) ? true : false;
          this.isLoading = false;
        },
        failRes => {
          this.isLoading = false;
        }
      );
    },
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.is_page == true) {
          that.getMore();
        }
      });
    },
    //分享
    wechatShare: function () {
      // let title = '我的团队';
      // let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`;
      // utilJs.wechatConfig(shareUrl, title, "", "", function () { });
      utilJs.wechatConfig("", "", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      // let title = '我的团队';
      // let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`;
      // utilJs.appShareTrue(title, "", shareUrl, "");
      utilJs.appShareTrue("", "", "", "");
    }
  },
  activated() {
    setDocumentTitle("我的团队");// eslint-disable-line
    this.firstIn = true;
    this.teamList = [];
    this.page = 1;
    this.is_page = false;
    this.isLoading = false;
    this.searchText = '';
    this.tabList = [{
      title: '直推用户',
      index: 1,
    }, {
      title: '间推用户',
      index: 0,
    }];
    this.memberType = 1;
    this.userId = "";
    this.nickname = "";
    this.realName = "";
    this.mobile = "";
    this.teamCount = 0;
    this.getCount();
    this.getMore();
    this.getChainConf();
    window.addEventListener('scroll', this.windowScrollFunction);
    this.wechatShare();
  },
  deactivated() {
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
